<%@ page import="com.augmentum.oes.Constants"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ page import="com.augmentum.oes.util.StringUtil" %>
<%@ page import="com.augmentum.oes.util.PathUtil" %>
<%@ page import="com.augmentum.oes.util.PropertyUtil" %>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Edit Question</title>
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/main.css" type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/question.css" type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/divtable.css" type="text/css" />
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jquery-1.10.2.min.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/dialog.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/question.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="logo-icon">
      </div>
      <div class="head-title">
        Online Exam System
      </div>
      <div class="user-logout">
        <div class="language">
                          中文
        </div>
        <div class="person-info-outdiv">
          <div onclick="javascript:window.location.href='<%=PathUtil.getFullPath("userdetail.action")%>'" class="person-info-inner float-left">
            <div class="person-info-inner"><img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Web_PersonalInformation_20x20.png" class="person-info-currentpage"></div>
            <span >${USER.userName}</span>
          </div>
          <div class="logout1" onclick="javascript:window.location.href='../static/logout.jsp'">Logout</div>
        </div>
      </div>
    </div>
    <div class="tab-panel"> 
      <div class="question-manage active" onclick="toQuestionList();">
        Question Management
      </div>
      <div class="exam-manage" onClick="toExamList();" style="margin-left:119.1px;">
        Exam Management
      </div>
    </div>
    <div class="breadcrumb"><a onclick="toQuestionList();" class="cursor">Question Management</a> > <a onclick="toQuestionList();" class="cursor">Question List</a> > <label >QT000${QUESTION.id}</label></div>
    <div class="content-panel content-panel-breadcrumb">
      <div class="content-empty-panel overflow-auto">
         <div class="form-body">
         <div style="min-width:400px;width:92%;margin:0 auto;">
              <div class="questionid">
                <div class="questionid-title">Question ID:</div>
                 <div class="questionid-input"><label>QT000${QUESTION.id}</label></div>
              </div>
              <div class="question">
                <div class="question-title">Question:</div>
                <div class="view-question-detail" style="display:table;">
                  <div class="question-detail overflow-auto" style="vertical-align: middle;display: table-cell;">
                  <c:set scope="request" var="questionContent" value="${QUESTION.question}"></c:set><%=StringUtil.htmlEncode((String)request.getAttribute("questionContent"))%>
                   </div>
                </div>
              </div>
               <div class="answer">
               
               <div class="answer-title">Answer:</div>
                 <input type="hidden" value="${QUESTION.id }" name="qid" />
                 <div class="answer-input">
                  <div class="answer-div overflow-auto">
                  <c:set scope="request" var="answerA" value="${QUESTION.answerA}"></c:set>
                  <c:set scope="request" var="answerB" value="${QUESTION.answerB}"></c:set>
                  <c:set scope="request" var="answerC" value="${QUESTION.answerC}"></c:set>
                  <c:set scope="request" var="answerD" value="${QUESTION.answerD}"></c:set>
                    <div <c:if test="${QUESTION.answer eq 1}" > class="right-background" title="This is a right answer." </c:if>> A.&nbsp;<label ><%=StringUtil.htmlEncode((String)request.getAttribute("answerA"))%></label></div>
                    <div <c:if test="${QUESTION.answer eq 2}" > class="right-background" title="This is a right answer."</c:if>> B.&nbsp;<label ><%=StringUtil.htmlEncode((String)request.getAttribute("answerB"))%></label></div>
                    <div <c:if test="${QUESTION.answer eq 3}" > class="right-background" title="This is a right answer."</c:if>> C.&nbsp;<label ><%=StringUtil.htmlEncode((String)request.getAttribute("answerC"))%></label></div>
                    <div <c:if test="${QUESTION.answer eq 4}" > class="right-background" title="This is a right answer."</c:if>> D.&nbsp;<label ><%=StringUtil.htmlEncode((String)request.getAttribute("answerD"))%></label></div>
                  </div>
                </div>
              
              </div>
              <c:if test="${!empty SUCCESS_MSG}">
                <script>
                  $(function(){
                    flashMsg('${SUCCESS_MSG}');
                    window.setTimeout(flashMsgHidden,4000);
                  });
                </script>
              </c:if>
              <%session.removeAttribute("SUCCESS_MSG"); %>
              
                  <div class="edit-outdiv">
                   <div class="edit-button" onclick="toEditQuestion(${QUESTION.id});" onmouseout="this.className='edit-button'" onmouseover="this.className='edit-button-over'" style="float:left;">
                      Edit
                   </div>
                   <div class="edit-button " onClick="toQuestionList();" onmouseout="this.className='edit-button'" onmouseover="this.className='edit-button-over'" style="float:right;">
                       Cancel
                   </div>
                 </div>
           </div>
           </div>
      </div>
    </div>
    <div class="footer">
      <p> Copyright © 2014 Augmentum, Inc.All Rights Reserved.</p>
    </div>
    <div class="modal-dialog" id="modalDialog">
      <div onclick="modalDialogHidden();" title="Close Dialog" class="modal-dialog-closebutton"></div>
      <div class="modal-dialog-msg"></div>
      <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes">Yes</div>
        <div class="modal-btn modal-dialog-btn-no">No</div>
      </div>
    </div>
    <div class="flash-msg" id="flashMsg" ></div>
    <div class="modal-div" id="modalDiv"></div>
  </body>
</html>